<template>
	<view class="goods-info-view">
		<!-- 轮播图 -->
		<u-swiper :list="list1" height="260" radius="0"></u-swiper>
		<!-- 内容 -->
		<view class="padding-30">
			<view class="bg-fff border-radius20 padding-30 margin-bottom30">
				<view class="flex-alignItems-center">
					<view v-if="pathCode == '积分商城'" class="margin-bottom20">
						<text class="fontSize-15 margin-right20 color-704234">积分</text>
						<text style="color: #C90F0F;" class="fontSize-16">{{goodsDetail.gift_score}}</text>
					</view>
					<view v-else style="color: #C90F0F;" class="margin-bottom20 margin-right20">
						<text class="fontSize-15">￥</text>
						<text class="fontSize-30 fontWeight-bold">{{goodsDetail.price}}</text>
					</view>
				</view>
				<view class="fontSize-15 color-704234 margin-bottom20">{{goodsDetail.title}}</view>
				<!-- <view class="flex-flex-warp">
					<view class="goods-info-tag flex-center">10节</view>
				</view> -->
			</view>
			<view class="bg-fff border-radius20 padding-30 margin-bottom30" v-if="pathCode !== '折扣商城'">
				<!-- <view class="fontSize-15 color-704234 margin-bottom30" v-if="pathCode == '折扣商城'">介绍</view> -->
				<view class="fontSize-15 color-704234 margin-bottom30">商品简介</view>
				<view class="fontSize-15 color-704234">
					{{goodsDetail.describes}}
				</view>
			</view>
			<view class="bg-fff border-radius20 padding-30 margin-bottom30">
				<view class="fontSize-15 color-704234 margin-bottom30" v-if="pathCode == '折扣商城'">购买须知</view>
				<view class="fontSize-15 color-704234 margin-bottom30" v-else>商品介绍</view>
				<view class="fontSize-15 color-704234">
					<u-parse :content="goodsDetail.content"></u-parse>
				</view>
			</view>
			<!-- 底部操作栏 -->
			<view style="height: 200rpx;"></view>
			<view class="position-fixed-100bottom" @click="buyShow = true">
				<view class="flex-between bg-fff padding-30">
					<view v-if="pathCode == '积分商城'" style="color: #C90F0F;" class="margin-bottom20">
						积分 {{goodsDetail.gift_score}} 
					</view>
					<view v-else style="color: #C90F0F;" class="margin-bottom20">
						<text class="fontSize-15">￥</text>
						<text class="fontWeight-bold" style="font-size: 20px;">{{goodsDetail.price}}</text>
					</view>
					<view class="shop-buys-btn1 flex-center" v-if="pathCode !== '折扣商城'"
					@click="addCartShow">加入购物车</view>
					<view class="shop-buys-btn flex-center" @click="buyNowShow">立即购买</view>
				</view>
			</view>
		</view>

		<!-- 规格弹窗 -->
		<u-popup :show="skuPopupShow" @close="skuPopupShow = false" :closeable="true">
			<view class="popup-view">
				<view style="height: 100rpx;"></view>
				<view class="margin-bottom20" v-for="(item,index) in skuList" :key="index">
					<view class="fontSize-15 color-000 margin-bottom20">
						{{item.name}}
					</view>
					<view class="flex-flex-warp">
						<view class="flex-center" v-for="(item1,index1) in item.item" :key="index1"
							:class="skuIndex[index].id == item1.id?'sku-item1':'sku-item'"
							@click="chooseGoodsSku(index,item1)">
							{{item1.name}}
						</view>
					</view>
				</view>
				<view class="flex-space-between">
					<view class="fontSize-14 color-000">购买数量</view>
					<u-number-box v-model="count" min="1"></u-number-box>
				</view>
				<!-- 底部操作栏 -->
				<template v-if="pathCode == '积分商城'">
					<view class="margin-top50">
						<view class="shop-buys-skubtn1 flex-center flex1" v-if="addCartStatus == '加入购物车'"
						@click="addCart">加入购物车</view>
						<view class="shop-buys-skubtn flex-center flex1" v-else @click="confirmOrder1">
							立即购买
						</view>
					</view>
				</template>
				<template v-else-if="pathCode == '折扣商城'">
					<view class="margin-top50">
						<view class="shop-buys-skubtn flex-center flex1" @click="confirmOrder2">
							立即购买
						</view>
					</view>
				</template>
				<template v-else>
					<view class="margin-top50">
						<view class="shop-buys-skubtn1 flex-center flex1" v-if="addCartStatus == '加入购物车'"
						@click="addCart">加入购物车</view>
						<view class="shop-buys-skubtn flex-center flex1" v-else @click="confirmOrder">
							立即购买
						</view>
					</view>
				</template>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [],
				buyShow: false,
				goodsDetail: {},
				goods_id: '',
				tagList: [],
				value: 1,
				skuPopupShow: false,
				skuList: [],
				// 选择规格索引
				skuIndex: [],
				spu_id: '',
				spu_name: '',
				// 地址信息
				address: {},
				sku_price: '',
				count: 1,
				// 页面状态参数
				pathCode: '',
				addCartStatus:''
			}
		},
		onLoad(e) {
			this.goods_id = e.goods_id
			this.pathCode = e.pathCode
			this.getGoodsDetail()
		},
		onShow() {

		},
		methods: {
			// 加入购物车
			async addCart(){
				let form = {
					goods_id: this.goods_id,
					count: this.count,
					spu_id: this.spu_id
				}
				let res = await this.$http.post(this.$api.join_cart,form,{token:true})
				if(res.code == 1){
					this.$tools.toast('添加购物车成功')
					this.skuPopupShow = false
				}
			},
			// 立即购买弹窗
			buyNowShow(){
				this.addCartStatus = '立即购买'
				this.skuPopupShow = true
			},
			// 添加购物车弹窗显示
			addCartShow(){
				this.addCartStatus = '加入购物车'
				this.skuPopupShow = true
			},
			// 跳转到折扣预订单页面
			confirmOrder2() {
				let form = {
					goods_id: this.goods_id,
					count: this.count
				}
				let goods = {
					image: this.goodsDetail.image,
					title: this.goodsDetail.title,
					price: this.goodsDetail.price,
					sku_price: this.sku_price,
					delivery_money: this.goodsDetail.delivery_money,
					gift_score: this.goodsDetail.gift_score
				}
				this.$tools.navigateTo('/pages/index/score-list/discount-confirm-order?form=' + JSON.stringify(form)+
				'&goods=' + JSON.stringify(goods))
			},
			// 跳转到积分预订单页面
			confirmOrder1() {
				let form = {
					goods_id: this.goods_id,
					count: this.count,
					spu_id: this.spu_id
				}
				let goods = {
					image: this.goodsDetail.image,
					title: this.goodsDetail.title,
					price: this.goodsDetail.price,
					sku_price: this.sku_price,
					delivery_money: this.goodsDetail.delivery_money,
					gift_score: this.goodsDetail.gift_score
				}
				if (uni.getStorageSync('address_default')) {
					this.address = uni.getStorageSync('address_default')
				}
				this.$tools.navigateTo('/pages/index/score-list/score-confirm-order?form=' + JSON.stringify(form) +
					'&address=' + JSON
					.stringify(this.address) + '&goods=' + JSON.stringify(goods) + '&spu_name=' + this.spu_name.slice(
						0, -1))
			},
			// 跳转到预订单页面
			confirmOrder() {
				let form = {
					goods_id: this.goods_id,
					count: this.count,
					spu_id: this.spu_id
				}
				let goods = {
					image: this.goodsDetail.image,
					title: this.goodsDetail.title,
					price: this.goodsDetail.price,
					sku_price: this.sku_price,
					delivery_money: this.goodsDetail.delivery_money
				}
				if (uni.getStorageSync('address_default')) {
					this.address = uni.getStorageSync('address_default')
				}
				this.$tools.navigateTo('/pages/shop/confirm-order?form=' + JSON.stringify(form) + '&address=' + JSON
					.stringify(this.address) +
					'&goods=' + JSON.stringify(goods) + '&spu_name=' + this.spu_name.slice(0, -1))
			},
			// 选择商品规格
			chooseGoodsSku(index, item) {
				this.spu_id = ''
				this.spu_name = ''
				this.skuIndex[index].id = item.id
				this.skuIndex[index].name = item.name
				this.skuIndex.forEach(item => {
					this.spu_id += item.id + '_'
				})
				this.skuIndex.forEach(item => {
					this.spu_name += item.name + '_'
				})
				this.skuPrices()
			},
			// 获取商品详情
			async getGoodsDetail() {
				let res = await this.$http.post(this.$api.goods_detail, {
					goods_id: this.goods_id
				}, {
					token: true
				})
				this.goodsDetail = res.data.goods
				this.list1 = res.data.goods.images
				this.tagList = res.data.goods.tag.split(',')
				this.skuList = res.data.items
				let skuIndex = res.data.items.map(itemValue => {
					return itemValue.item.map(itemValue1 => {
						return {
							id: itemValue1.id,
							name: itemValue1.name
						}
					})
				})
				skuIndex.forEach(item => {
					this.skuIndex.push(item[0])
				})
				this.skuIndex.forEach(item => {
					this.spu_id += item.id + '_'
				})
				this.skuIndex.forEach(item => {
					this.spu_name += item.name + '_'
				})
				this.skuPrices()
			},
			// 规格价钱
			async skuPrices() {
				this.spu_id = this.spu_id.slice(0, -1)
				let res = await this.$http.post(this.$api.goods_item_price, {
					goods_id: this.goods_id,
					spu_id: this.spu_id
				}, {
					token: true
				})
				this.sku_price = res.data.price
				this.spu_id = res.data.spu_id
			},
			valChange(e) {
				console.log(e)
			},
			closebuyShow() {
				this.buyShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-buys-skubtn1 {
		// width: 240rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #F2D7B7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
	.shop-buys-skubtn {
		// width: 240rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #967C5E;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.line-view {
		width: 36rpx;
		height: 2rpx;
		background-color: #5A8AFF;
		border-radius: 2rpx;
	}

	.step-view {
		width: 34rpx;
		height: 34rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		background: #967C5E;
		border-radius: 50%;
	}

	.sku-item {
		width: 180rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #4D4D4D;
		background: #F5F5F5;
		border-radius: 40rpx;
		border: 1rpx solid #F5F5F5;
		margin: 0 20rpx 20rpx 0;
	}

	.sku-item1 {
		width: 180rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #967C5E !important;
		background: #FFF8F1;
		border-radius: 40rpx;
		border: 1rpx solid #967C5E !important;
		margin: 0 20rpx 20rpx 0;
	}

	.class-icon-item {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		color: #5A8AFF;
		background: #F5F8FF;
		border: 1rpx solid #5A8AFF;
		margin: 20rpx 20rpx 0 0;
	}

	.class-icon-view {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.sku-item {
		width: 180rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #4D4D4D;
		background: #F5F5F5;
		border-radius: 40rpx;
		border: 1rpx solid #F5F5F5;
		margin: 0 20rpx 20rpx 0;
	}

	// .sku-item1{
	// 	width: 180rpx;
	// 	height: 80rpx;
	// 	font-weight: 400;
	// 	font-size: 28rpx;
	// 	color: #5A8AFF !important;
	// 	background: #F5F8FF;
	// 	border-radius: 40rpx;
	// 	border: 1rpx solid #5A8AFF !important;
	// 	margin: 0 20rpx 20rpx 0;
	// }
	.shop-buys-btn1 {
		width: 240rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #F2D7B7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.shop-buys-btn {
		width: 240rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #967C5E;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.buy-btn {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(130deg, #E2BF94 0%, #E5C6A0 28%, #E6CDB1 56%, #D1AA79 100%);
	}

	.buy-center-view1 {
		width: 380rpx;
		// height: 220rpx;
		background-color: #EFDFCD;
		padding: 30rpx;
	}

	.buy-center {
		// position: relative;
		margin: 30rpx 0;
		width: 500rpx;
		height: 260rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// .buy-center-image{
	// 	width: 100%;
	// 	height: 100%;
	// 	flex-shrink: 0;
	// }
	.popup-view {
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.goods-info-tag {
		padding: 5rpx 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #947065;
		background: rgba(148, 112, 101, 0.14);
		border-radius: 20rpx;
		border: 1rpx solid #967C5E;
		margin: 0 20rpx 20rpx 0;
	}

	.goods-info-view {
		// background-color: #F5F1E8;
		// min-height: 100vh;
	}
</style>